<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WMS GetFeatureInfo (Image Layer)</title>
  <script src="OpenLayers4.3.1/ol.js"></script>
  <link rel="stylesheet" href="OpenLayers4.3.1/ol.css" type="text/css">
  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
</head>
<body>
<div id="map" class="map"  style="width: 60%;height: 60%"></div>
<div id="info">&nbsp;</div>
<style>
  .rotate-north {
    top: 30px;
    right: .5em;
  }
  .ol-touch .rotate-north {
    top: 80px;
  }
</style>
<script>
  //create data source
  window.app = {};
  var app = window.app;
  app.RotateNorthControl = function(opt_options) {

    var options = opt_options || {};

    var Nbutton = document.createElement('button');
    Nbutton.innerHTML = 'N';

    var Sbutton = document.createElement('button');
    Sbutton.innerHTML = 'S';

    var this_ = this;
    var handleRotateNorth = function() {
      this_.getMap().getView().setRotation(0);
    };

    var handleRotateSouth = function() {
      this_.getMap().getView().setRotation( Math.PI);
    };

    Nbutton.addEventListener('click', handleRotateNorth, false);
    Nbutton.addEventListener('touchstart', handleRotateNorth, false);

    Sbutton.addEventListener('click', handleRotateSouth, false);
    Sbutton.addEventListener('touchstart', handleRotateSouth, false);

    var element = document.createElement('div');
    element.className = 'rotate-north ol-unselectable ol-control';
    element.appendChild(Nbutton);
    element.appendChild(Sbutton);

    ol.control.Control.call(this, {
      element: element,
      target: options.target
    });

  };
  ol.inherits(app.RotateNorthControl, ol.control.Control);
  var shanghai = ol.proj.fromLonLat([121.48, 31.22]);
  var qingyuan = ol.proj.fromLonLat([113.07854557405214, 23.697834885591682]);
  var wmsSource = new ol.source.ImageWMS({
    url: 'http://localhost:8080/geoserver/china/wms',
//    url: 'http://222.84.165.140:8080/geoserver/china/wms',
//    url: 'http://222.84.165.140:8080/geoserver/china/wms',

    params: {'LAYERS': 'chinaMainLand',tiled:true},
//    params: {'LAYERS': 'china:guilin'},

    serverType: 'geoserver',
    crossOrigin: 'anonymous'
  });
  //create a layer wiht the source
  var wmsLayer = new ol.layer.Image({
    source: wmsSource
  });
  //config the point of view
  var view = new ol.View({
//    center:ol.proj.fromLonLat([110.290195,25.273566]),
    center:qingyuan,
    zoom: 15,
    maxZoom:18,
    minZoom :10
  });
//  view.on('change',function(evt){
//      console.log(view.getZoom());
//  });
  //create a map in the div which id is map with the layer and view created before
  var map = new ol.Map({
    controls: ol.control.defaults({
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
        collapsible: false
      })
    }).extend([
      new app.RotateNorthControl()
    ]),
    layers: [wmsLayer],
    target: 'map',
    view: view,
    logo : false,
    loadTilesWhileAnimating: true

  });
  //make somme action on mouse click for test
  map.on('click', function(evt) {
    document.getElementById('info').innerHTML = '';
    var viewResolution = /** @type {number} */ (view.getResolution());

    var url = wmsSource.getGetFeatureInfoUrl(
            evt.coordinate, viewResolution, 'EPSG:3857',
            {'INFO_FORMAT': 'text/html'});
    if (url) {
      document.getElementById('info').innerHTML =
              '<iframe seamless src="' + url + '"></iframe>';
    }
    console.log(ol.proj.toLonLat( evt.coordinate));
//    view.setCenter(evt.coordinate);
  });


  map.on('pointermove', function(evt) {
    if (evt.dragging) {
      return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    var hit = map.forEachLayerAtPixel(pixel, function() {
      return true;
    });
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
  });
</script>
</body>
</html>